<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    /*
    * 使用属性初始化器来正确的绑定回调函数(推荐)，在组件内使用箭头函数定义一个方法，这种方式的缺点是不能自定义传参
    * */
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {count: 1}

        }

        render() {
            const {count} = this.state
            return (
                <div className="app">
                    <h1>count的值是:{count}</h1>
                    <button onClick={this.addCount}>+1</button>
                    <button onClick={this.subCount}>-1</button>
                </div>
            );
        }

        /*使用ES6的classFields语法*/
        addCount = () => {
            this.setState({count: this.state.count += 1})
        }

        subCount = () => {
            this.setState({count: this.state.count -= 1})
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
